<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :unique-opened="true"
      @select="handleSelect"
      :collapse="collapse"
      background-color="#324157"
      text-color="#bfcbd9"
      active-text-color="#20a0ff"
      router
    >
      <template v-for="item in menu">
        <template v-if="item.subs">
          <el-submenu :index="item.index" :key="item.index">
            <template slot="title">
              <i :class="'iconfont ' + item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </template>
            <template v-for="sub in item.subs">
              <template v-if="sub.subs">
                <el-submenu :index="item.index + sub.index" :key="sub.index">
                  <template slot="title">
                    <span slot="title">{{ sub.title }}</span>
                  </template>
                  <el-menu-item
                    v-for="(threeSub, i) in sub.subs"
                    :key="i"
                    :index="item.index + sub.index + threeSub.index"
                  >
                    {{ threeSub.title }}
                  </el-menu-item>
                </el-submenu>
              </template>
              <template v-else>
                <el-menu-item :index="item.index + sub.index" :key="sub.index">
                  <span slot="title">{{ sub.title }}</span>
                </el-menu-item>
              </template>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="'iconfont ' + item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import bus from "../../utils/bus";
import Menu from "../../menu.js";
export default {
  data() {
    return {
      role: sessionStorage.getItem("role"),
      collapse: false,
      url: this.$route.path,
      menu: []
    };
  },
  methods: {
    handleSelect(index) {
      this.url = index;
    },
    getBread() {
      let arr = [];
      let paths = this.url.split("/");
      let path = "/" + paths[1];
      let subPath = null;
      let threePath = null;
      if (paths[2]) {
        subPath = "/" + paths[2];
      }
      if (paths[3]) {
        threePath = "/" + paths[3];
      }
      for (let i = 0; i < Menu.length; i++) {
        const item = Menu[i];
        if (this.url == "/main/home") {
          arr.push({
            title: "首页",
            url: item.index
          });
          break;
        } else {
          if (path == item.index) {
            arr.push({
              title: item.title,
              url: item.index
            });
            if (item.subs) {
              item.subs.forEach(sub => {
                if (subPath == sub.index) {
                  arr.push({
                    title: sub.title,
                    url: sub.index
                  });
                  if (sub.subs) {
                    sub.subs.forEach(three => {
                      if (threePath == three.index) {
                        arr.push({
                          title: three.title,
                          url: three.index
                        });
                      }
                    });
                  }
                }
              });
            }
          }
        }
      }
      this.$emit("path-change", arr);
    }
  },
  computed: {
    onRoutes() {
      this.getBread();
      return this.$route.path;
    }
  },
  mounted() {
    // this.menu = Menu;
    const cloneMenu = JSON.parse(JSON.stringify(Menu));
    for (var i = 0, newMenu = []; i < cloneMenu.length; i++) {
      if (cloneMenu[i].meta.role.indexOf(this.role) > -1) {
        if (cloneMenu[i].subs) {
          cloneMenu[i].subs = cloneMenu[i].subs.filter(item => {
            return item.meta.role.indexOf(this.role) > -1;
          });
        }
        newMenu.push(cloneMenu[i]);
      }
    }
    this.menu = newMenu;
  },
  created() {
    bus.$on("collapse", msg => {
      this.collapse = msg;
    });
  }
};
</script>

<style lang="scss">
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
  & > ul {
    background-color: #fff !important;
    height: 100%;
    li {
      background: #fff !important;
      color: #333 !important;
      .el-submenu__title {
        background: #fff !important;
        color: #333 !important;
      }
    }
    .el-menu-item.is-active {
      color: #409eff !important;
    }
    .iconfont {
      font-size: 20px;
      margin-right: 5px;
    }
  }
  &::-webkit-scrollbar {
    width: 0;
  }
  .sidebar-el-menu {
    &:not(.el-menu--collapse) {
      width: 230px;
    }
  }
}
</style>

